﻿
var dkLayout = window.dkLayout = {

    initContainer: function () {
        $('.dk-container').unbind('click');
        $('.dk-container').click(function () {
            var me = $(this);
            //var path = { path: '' };
            //getPath(me, path);
            //$('#dk-current-path').html(path.path);
            $('.dk-container').each(function (index, el) {
                $(el).removeAttr('id');
            });

            me.attr('id', 'dk-selected');
            //readContainer(me);

//            if (isBinary(me)) {
//                $('#binary-container').attr('disabled', 'disabled');
//                $('#child-container').attr('disabled', 'disabled');
//            } else {
//                $('#binary-container').removeAttr('disabled');
//                $('#child-container').removeAttr('disabled');
//            }

            //currentContainer = me;
            return false;
        }).each(function (index, el) {
            var t = (new Date()).getTime();
            if ($(el).children('input[type="hidden"]').length == 0) {
                $(el).append('<input type="hidden" value="' + t + '-' + index + '"/>');
            }
        });
    },

    resizeContainer: function (el) {
        var pEl = el.parent();
        if (pEl != null && pEl.hasClass('dk-container')) {
            var ph = parseInt(pEl.css('height'));
            var elh = parseInt(el.css('height'));
            if (ph < elh) {
                pEl.css('height', elh);
            } else {
                var h = 0, w = 0, bh = 0, ph = 0;
                pEl.children('.dk-container').each(function (index, c) {
                    var jc = $(c);
                    var ch = parseInt(jc.css('height'));
                    h = ch > h ? ch : h;

                    if (jc.hasClass('dk-left') || jc.hasClass('dk-right')) {
                        w += parseInt(jc.css('width'));
                        bh += ch;
                    } else if (jc.hasClass('dk-leaf')) {
                        ph += ch;
                    }
                });
                bh = bh < ph ? ph : bh;
                h = h < ph ? ph : h;
                if (w > parseInt(pEl.css('width'))) {
                    pEl.css('height', bh);
                } else {
                    pEl.css('height', h);
                }
            }

            resizeContainer(pEl);
        }

        readContainer(el);
    },

    isBinary: function (el) {
        return el.children('.dk-left').length > 0;
    },

    getPath: function (el, path) {

        if (el.hasClass('dk-container')) {
            if (el.hasClass('dk-left')) {
                if (path.containWidthAndHeight == true) {
                    path.path = '.L(' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                } else {
                    path.path = '.L' + path.path;
                }
                getPath(el.parent(), path);
            } else if (el.hasClass('dk-right')) {
                if (path.containWidthAndHeight == true) {
                    path.path = '.R(' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                } else {
                    path.path = '.R' + path.path;
                }
                getPath(el.parent(), path);
            } else if (el.parent().attr('id') == 'webpage-designer') {
                el.parent().children('.dk-container').each(function (index, c) {
                    if (c.innerHTML == el.html()) {
                        if (path.containWidthAndHeight == true) {
                            path.path = 'containers[' + index + '](' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                        } else {
                            path.path = 'containers[' + index + ']' + path.path;
                        }
                    }
                });
            } else if (!isBinary(el.parent())) {
                el.parent().children('.dk-container').each(function (index, c) {
                    if (c.innerHTML == el.html()) {
                        if (path.containWidthAndHeight == true) {
                            path.path = '.items[' + index + '](' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                        } else {
                            path.path = '.items[' + index + ']' + path.path;
                        }
                        getPath(el.parent(), path);
                    }
                });
            }
        }
    },

    insertBinaryContainer: function (p) {
        p.append('<div class="dk-container dk-left dk-leaf" style="width:50px;"></div>');
        p.append('<div class="dk-container dk-right dk-leaf" style="width:50px;"></div>');
        p.removeClass('dk-leaf');
        initContainer();
        p.resizable('destroy');
        $('.dk-leaf', p).resizable({
            resize: function (event, ui) {
                resizeContainer(ui.element);
                ui.element.click();
            }
        });
    },

    insertClildContainer: function (p) {
        p.append('<div class="dk-container dk-leaf"><input type="hidden" value="' + (new Date()).getTime() + '"/></div>');
        p.removeClass('dk-leaf');
        p.resizable('destroy');
        $('.dk-leaf', p).resizable({
            resize: function (event, ui) {
                resizeContainer(ui.element);
                ui.element.click();
            }
        });
        while (p.hasClass('dk-container')) {
            p.css('height', parseInt(p.css('height')) + 100);
            p = p.parent();
        }
        initContainer();
        currentContainer = $('#dk-selected');
    },

    deleteContainer: function (el) {
        var p = el.parent();
        if (isBinary(p)) {
            p.html('');
            p.addClass('dk-leaf');
        } else {
            el.resizable('destroy');
            el.html('');
            el.remove();
            if (p.children('.dk-container').length == 0 && p.attr('id') != 'webpage-designer') {
                p.addClass('dk-leaf');
            }
        }
        if (p.hasClass('dk-leaf')) {
            p.resizable({
                resize: function (event, ui) {
                    resizeContainer(ui.element);
                    ui.element.click();
                }
            });
        }
        initContainer();
    },

    getLeafPaths: function () {

        var paths = [];

        $('.dk-leaf').each(function (index, el) {
            var path = { path: '', containWidthAndHeight: true };
            getPath($(el), path);

            paths.push(path.path);
        });

        return paths;
    }
};
